<template>
  <el-dialog v-model="visible" title="下游单号" width="620" show-footer show-zoom resize @close="close">
    <template #default>
      <el-table :data="tableData" border style="width: 100%" highlight-current-row :header-cell-style="{
        background: '#F6FAFF'
      }">
        <el-table-column prop="sku" label="SKU" width="180" />
        <el-table-column prop="batch_code" label="批次号" width="180" />
        <el-table-column prop="operation" label="操作">
          <template #default="{ row }">
            <el-input v-model="row.number" style="width: 120px;" placeholder="请输入数量"></el-input>
            <el-button type="primary" @click="print(row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getDownOrder } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { getLodop } from '@/utils/LodopFuncs.js';
import { getCurrentDayNumber } from '@/utils/dateOrTime.js'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  options: {
    type: Object,
    default: {},
  },
})

const data = reactive({
  tableData: [],
  receipt_number: ''
})
const { tableData, receipt_number } = toRefs(data)

const open = (id, number) => {
  receipt_number.value = number
  getDetail(id)
  visible.value = true
}


const getDetail = async (id) => {
  try {
    const res = await getDownOrder({
      down_order: id
    })
    tableData.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const print = (row) => {
  if (!row.number || row.number <= 0) {
    ElMessage.error('请输入打印件数')
    return
  }
  const LODOP = getLodop();
  for (let i = 0; i < row.number; i++) {
    LODOP.ADD_PRINT_RECT(0, 0, 300, 200, 0, 1);
    LODOP.ADD_PRINT_TEXT(10, 5, 250, 33, row.sku);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(10, 220, 100, 33, getCurrentDayNumber());
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(150, 20, 163, 33, receipt_number.value);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 22);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_BARCODE(40, 5, 300, 100, "Code39", row.batch_code);
    // LODOP.PREVIEW(); // 打印预览
    LODOP.PRINT();

  }
}

const close = () => {
  tableData.value = []
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
